<!DOCTYPE html>


<html lang="zh-CN">
  

    <head>
      <meta charset="utf-8" />
       
      <meta name="keywords" content="webshan.king" />
       
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title> 单铁虎的博客</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/images/科比.png" />
       
<link rel="stylesheet" href="/dist/main.css">

      
<link rel="stylesheet" href="/css/fonts/remixicon.css">

      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.staticfile.org/pace/1.2.4/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    </head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      
<section class="cover">
    
  <div class="cover-frame">
    <div class="bg-box">
      <img src="/images/科比.jpg.jpg" alt="image frame" />
    </div>
    <div class="cover-inner text-center text-white">
      <h1><a href="/">单铁虎的博客</a></h1>
      <div id="subtitle-box">
        
        <span id="subtitle"></span>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="javascript:void(0)" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>



<script src="https://cdn.staticfile.org/typed.js/2.0.12/typed.min.js"></script>


<!-- Subtitle -->

  <script>
    try {
      var typed = new Typed("#subtitle", {
        strings: ['有些人宁愿吃生活的苦，缺不想吃学习的苦', '有些人宁愿吃学习的苦，确不能忍受思考的痛', '学习不可盲目，盲目学习不如不学。'],
        startDelay: 0,
        typeSpeed: 300,
        loop: true,
        backSpeed: 100,
        showCursor: true
      });
    } catch (err) {
      console.log(err)
    }
  </script>
  
<div id="main">
  <section class="outer">
  
  
  

<div class="notice" style="margin-top:50px">
    <i class="ri-heart-fill"></i>
    <div class="notice-content" id="broad"></div>
</div>
<script type="text/javascript">
    fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
            document.getElementById("broad").innerHTML = data.hitokoto;
        })
        .catch(console.error)
</script>

<style>
    .notice {
        padding: 20px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 100%;
        background: #fbfbfb50;
        border-radius: 10px;
    }

    .notice i {
        float: left;
        color: #999;
        font-size: 16px;
        padding-right: 10px;
        vertical-align: middle;
        margin-top: -2px;
    }

    .notice-content {
        display: initial;
        vertical-align: middle;
    }
</style>
  
  <article class="articles">
    
    
    
    
    <article
  id="post-ts中any和unknwon的区别"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/09/21/ts%E4%B8%ADany%E5%92%8Cunknwon%E7%9A%84%E5%8C%BA%E5%88%AB/"
    >ts中any和unknwon的区别</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/09/21/ts%E4%B8%ADany%E5%92%8Cunknwon%E7%9A%84%E5%8C%BA%E5%88%AB/" class="article-date">
  <time datetime="2022-09-21T09:48:43.000Z" itemprop="datePublished">2022-09-21</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>unknwon和any都是ts中的顶级类型，但主要区别在于;</li>
<li>使用any相当于彻底放弃了类型检查，而unknwon类型相较于any更加严格，在执行大多数操作之前，会进行某种形式的检查。</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-textarea禁止拖拽"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/09/21/textarea%E7%A6%81%E6%AD%A2%E6%8B%96%E6%8B%BD/"
    >textarea禁止拖拽</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/09/21/textarea%E7%A6%81%E6%AD%A2%E6%8B%96%E6%8B%BD/" class="article-date">
  <time datetime="2022-09-21T09:41:43.000Z" itemprop="datePublished">2022-09-21</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>1、样式设置 ressize:noen;</li>
<li>2、样式可以设置最小高度 min-height: 、和最大高度max-height: ; 可以拖拽，但是不能超过最大高度和最小高度</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-This-指向"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/This-%E6%8C%87%E5%90%91/"
    >This 指向</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/This-%E6%8C%87%E5%90%91/" class="article-date">
  <time datetime="2022-06-19T07:22:17.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>在 JavaScript 中，this 通常指向的是我们正在执行的函数本身，或者是，<br>指向该函数所属的对象。</li>
<li>全局的 this → 指向的是 Window</li>
<li>对象中的 this → 指向其本身</li>
<li>事件中 this → 指向事件对</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-Js-中-call-与-apply-区别"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/Js-%E4%B8%AD-call-%E4%B8%8E-apply-%E5%8C%BA%E5%88%AB/"
    >Js 中.call()与.apply()区别</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/Js-%E4%B8%AD-call-%E4%B8%8E-apply-%E5%8C%BA%E5%88%AB/" class="article-date">
  <time datetime="2022-06-19T07:20:50.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>apply：调用一个对象的一个方法，用另一个对象替换当前对象。</li>
<li>call：调用一个对象的一个方法，用另一个对象替换当前对象。</li>
<li>从定义中可以看出，call 和 apply 都是调用一个对象的一个方法，用另一<br>个对象替换当前对象。而不同之处在于传递的参数，apply 最多只能有两<br>个参数——新 this 对象和一个数组 argArray，如果 arg 不是数组则会报<br>错</li>
<li>相同点:两个方法产生的作用是完全一样的。call, apply 作用就是借用别<br>人的方法来调用,就像调用自己的一样. </li>
<li>不同点:方法传递的参数不同</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-Js-中常见的内存泄漏"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/Js-%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F/"
    >Js 中常见的内存泄漏</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/Js-%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F/" class="article-date">
  <time datetime="2022-06-19T07:18:11.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>1.意外的全局变量</li>
<li>2.被遗忘的计时器或回调函数</li>
<li>3.脱离 DOM 的引用</li>
<li>4.闭包</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-Ajax-如何使用"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/Ajax-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8/"
    >Ajax 如何使用</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/Ajax-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8/" class="article-date">
  <time datetime="2022-06-19T06:54:47.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="一个完整的-AJAX-请求包括五个步骤："><a href="#一个完整的-AJAX-请求包括五个步骤：" class="headerlink" title="一个完整的 AJAX 请求包括五个步骤："></a>一个完整的 AJAX 请求包括五个步骤：</h3><ul>
<li>创建 XMLHTTPRequest 对象</li>
<li>使用 open 方法创建 http 请求，并设置请求地址</li>
<li>xhr.open（get&#x2F;post，url，async，true（异步），false（同步））经常</li>
<li>使用前三个参数</li>
<li>设置发送的数据，用 send 发送请求</li>
<li>注册事件（给 ajax 设置事件）</li>
<li>获取响应并更新页面</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-浏览器输入网址到页面渲染全过程"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BE%93%E5%85%A5%E7%BD%91%E5%9D%80%E5%88%B0%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E5%85%A8%E8%BF%87%E7%A8%8B/"
    >浏览器输入网址到页面渲染全过程</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BE%93%E5%85%A5%E7%BD%91%E5%9D%80%E5%88%B0%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E5%85%A8%E8%BF%87%E7%A8%8B/" class="article-date">
  <time datetime="2022-06-19T06:53:04.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>DN</li>
<li>解析 TCP</li>
<li>连接</li>
<li>发送 HTTP 请求</li>
<li>服 务 器 处 理 请 求 并 返 回</li>
<li>HTTP 报文浏览器解析渲<br>染页面</li>
<li>连接结束</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-三栏布局方式两边固定中间自适应"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F%E4%B8%A4%E8%BE%B9%E5%9B%BA%E5%AE%9A%E4%B8%AD%E9%97%B4%E8%87%AA%E9%80%82%E5%BA%94/"
    >三栏布局方式两边固定中间自适应</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F%E4%B8%A4%E8%BE%B9%E5%9B%BA%E5%AE%9A%E4%B8%AD%E9%97%B4%E8%87%AA%E9%80%82%E5%BA%94/" class="article-date">
  <time datetime="2022-06-19T06:52:06.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ol>
<li>margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。<br>中间栏被宽度为 100%的浮动元素包起来</li>
<li>自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后</li>
<li>绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，<br>中间的主体栏用左右 margin 值撑开距离。<br>4.flex 左右固定宽 中间 flex：1<br>5.网格布局</li>
<li>table 布局</li>
</ol>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-网页的三层结构有哪些"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/%E7%BD%91%E9%A1%B5%E7%9A%84%E4%B8%89%E5%B1%82%E7%BB%93%E6%9E%84%E6%9C%89%E5%93%AA%E4%BA%9B/"
    >网页的三层结构有哪些</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/%E7%BD%91%E9%A1%B5%E7%9A%84%E4%B8%89%E5%B1%82%E7%BB%93%E6%9E%84%E6%9C%89%E5%93%AA%E4%BA%9B/" class="article-date">
  <time datetime="2022-06-19T06:50:46.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>结构（html 或 xhtm 标记语言）表现（css 样式表）行为（js）<br>请简述媒体查询</li>
<li>媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css<br>样式，达到自适应的目的。</li>
<li>Rem 缺点</li>
<li>比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小，<br>就会导致看文章的时候特别费眼</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-Px，rem，em-的区别"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/06/19/Px%EF%BC%8Crem%EF%BC%8Cem-%E7%9A%84%E5%8C%BA%E5%88%AB/"
    >Px，rem，em 的区别</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/06/19/Px%EF%BC%8Crem%EF%BC%8Cem-%E7%9A%84%E5%8C%BA%E5%88%AB/" class="article-date">
  <time datetime="2022-06-19T06:49:25.000Z" itemprop="datePublished">2022-06-19</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>Px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的</li>
<li>em 相对长度单位，相对于当前对象内文本的字体尺寸<br>  em 的值并不是固定的<br>  em 会继承父级元素的字体大小（参考物是父元素的 font-size）<br>  em 中所有的字体都是相对于父元素的大小决定的<br>  rem 相对于 html 根元素的 font-size</li>
<li>1em&#x3D;1rem&#x3D;16px 在 body 中加入 font-size：62.5% 这样直接就是原<br>来的 px 数值除以 10 加上 em 就可以</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
    
</article>

    
  </article>
  

  
  <nav class="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2015-2022
        <i class="ri-heart-fill heart_icon"></i> 单铁虎
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/科比.jpg.jpg" alt="单铁虎的博客"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/%E6%89%93%E8%B5%8F.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->

<script src="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.staticfile.org/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->

<!-- CanvasBackground -->
 
<script src="/js/dz.js"></script>
 
<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
</body>

</html>